<template>
  <div>
    <h1>shallowRef() & triggerRef()</h1>
    <div>
      <div class="group">
        <button type="button" @click="editshallowRef">修改shallowRef</button>
        <button type="button" @click="triggerRefHandler">
          强制触发依赖于一个浅层 ref 的副作用
        </button>
      </div>
      <div class="group">
        {{ slrefdataObj3.count }}
      </div>
      <div class="group">
        <ul>
          <li v-for="item in slrefdataObj3.strArr" :key="item">{{ item }}</li>
        </ul>
      </div>
      <div class="group">
        <ul>
          <li v-for="(item, name) in slrefdataObj3.user" :key="name">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Study3StuDemo7'
}
</script>
<script setup lang="ts">
import { shallowRef, triggerRef } from 'vue'

let dataObj3 = {
  count: 0,
  strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
  user: {
    name: '许家印',
    sex: 'nan',
    age: 42,
    aihao: {}
  }
}

let slrefdataObj3 = shallowRef(dataObj3)

const editshallowRef = () => {
  // 直接使用 .value 赋值是可以的，深层不行
  // slrefdataObj3.value = {
  //   count: 3333,
  //   strArr: ['php', '刘强东3333', '马云', '马化腾', '任正非'],
  //   user: {
  //     name: '许家印',
  //     sex: 'nan',
  //     age: 42,
  //     aihao: {}
  //   }
  // }

  slrefdataObj3.value.count++
  console.log(slrefdataObj3.value.count, 'slrefdataObj3.value.count')
}
const triggerRefHandler = () => {
  triggerRef(slrefdataObj3)
}
</script>

<style lang="scss" scoped>
.group {
  padding: 20px;
  border: 2px solid #abcdef;
  margin: 10px 0;
}
</style>
